<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/layui/layui.js"></script>
    <link rel="stylesheet" href="lib/css/layui.css">
</head>
<body>
<h2>角色查询</h2>
<form class="layui-form" action="">

    <div class="layui-form-item">

        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="role_name" id="role_name" placeholder="请输入角色名" autocomplete="off" class="layui-input">
        </div>

        <button class="layui-btn" lay-submit lay-filter="search">查询</button>
    </div>
</form>

<table id="demo" lay-filter="test"></table>
<script>
    layui.use(['table','form','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        //第一个实例
        table.render({
            elem: '#demo',
            id: 'sys_rolesTable'
            , url: '../getSys_roles' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left'}
                , {field: 'role_name', title: '角色名字'}
                , {field: 'description', title: '描述'}
                , {field: 'is_lock', title: '不知道'}
                , {field: 'created_time', title: '住院时间'}
                , {field: 'updated_time', title: '出院时间'}
            ]]
        });

        form.on('submit(search)', function (data) {
            table.reload('sys_rolesTable', {
                url: '../getSys_roles'
                , where: {
                    role_name: $("#role_name").val(),
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>